import React, { useState, useEffect } from 'react';
import { 
  Play, 
  ChevronRight, 
  CheckCircle, 
  Star, 
  ChefHat, 
  BarChart3, 
  ArrowLeft, 
  LayoutDashboard, 
  Volume2, 
  ImageIcon, 
  Video, 
  User, 
  LogOut, 
  Info, 
  Gamepad2, 
  Home, 
  Check, 
  RotateCcw, 
  Lock, 
  Trophy, 
  Lightbulb,
  Heart,
  Music,
  Printer,
  Sparkles,
  Rocket
} from 'lucide-react';

// --- PILIHAN AVATAR ---
const avatars = [
  { id: 1, emoji: "👦", label: "Lelaki 1" },
  { id: 2, emoji: "👧", label: "Perempuan 1" },
  { id: 3, emoji: "🧒", label: "Lelaki 2" },
  { id: 4, emoji: "👩‍🦰", label: "Perempuan 2" },
  { id: 5, emoji: "👨‍🍳", label: "Chef" },
  { id: 6, emoji: "👨‍🌾", label: "Petani" },
  { id: 7, emoji: "🧑‍🔬", label: "Scientist" },
  { id: 8, emoji: "👨‍🎨", label: "Artis" },
  { id: 9, emoji: "👩‍🚀", label: "Angkasawan" },
  { id: 10, emoji: "🦁", label: "Singa" },
  { id: 11, emoji: "🦄", label: "Unicorn" },
  { id: 12, emoji: "🐱", label: "Kucing" },
];

// --- SUB-KOMPONEN ---

const Screen1Home = ({ studentName, setStudentName, setScreen, selectedAvatar, setSelectedAvatar }) => {
  return (
    <div className="flex-1 flex items-center justify-center p-4 md:p-8 bg-gradient-to-br from-yellow-100 via-pink-100 to-blue-100 animate-gradient-slow overflow-y-auto">
      <div className="bg-white/90 backdrop-blur-md rounded-[3rem] shadow-2xl flex flex-col md:flex-row overflow-hidden w-full max-w-4xl min-h-[550px] border-4 border-white my-auto">
        <div className="md:w-1/2 bg-gradient-to-br from-indigo-600 via-purple-600 to-pink-500 flex flex-col items-center justify-center text-white p-8 relative">
          <div className="absolute top-4 left-4 opacity-20"><Sparkles size={40} /></div>
          <div className="absolute bottom-10 right-10 opacity-20"><Rocket size={40} /></div>
          
          <div className="w-36 h-36 rounded-full border-8 border-white/20 shadow-2xl overflow-hidden bg-white/10 backdrop-blur-sm flex items-center justify-center text-7xl mb-6 transition-all duration-500 hover:scale-110">
            {selectedAvatar ? selectedAvatar.emoji : "👤"}
          </div>

          <h1 className="text-4xl md:text-5xl font-black text-center leading-tight tracking-tighter drop-shadow-lg">TriCareer<br/>MBPK</h1>
          <p className="mt-4 text-white/90 font-bold text-center text-sm px-4 bg-black/10 py-2 rounded-full">Bina Masa Depan Ceria! ✨</p>
          
          <div className="mt-8 grid grid-cols-4 gap-3 px-2">
            {avatars.map(av => (
              <button 
                key={av.id}
                onClick={() => setSelectedAvatar(av)}
                className={`w-11 h-11 rounded-2xl flex items-center justify-center text-2xl transition-all duration-300 ${selectedAvatar?.id === av.id ? 'bg-yellow-400 scale-125 shadow-[0_0_20px_rgba(250,204,21,0.6)] border-2 border-white' : 'bg-white/20 hover:bg-white/40 hover:rotate-6'}`}
              >
                {av.emoji}
              </button>
            ))}
          </div>
          <p className="mt-4 text-[11px] uppercase font-black text-white/60 tracking-[0.2em]">Pilih Karakter Anda</p>
        </div>
        
        <div className="md:w-1/2 p-8 md:p-12 flex flex-col justify-center bg-white/50">
          <h2 className="text-3xl font-black text-slate-800 mb-2">Selamat Datang! 👋</h2>
          <p className="text-lg text-slate-500 mb-8 font-medium">Jom mula kembara kerjaya anda sekarang.</p>
          
          <div className="mb-8 group">
            <label className="block text-xs font-black text-purple-500 uppercase mb-2 ml-1 tracking-widest transition-colors group-focus-within:text-pink-500">Nama Penuh Murid</label>
            <input 
              type="text" 
              placeholder="Masukkan nama di sini..." 
              value={studentName}
              onChange={(e) => setStudentName(e.target.value)}
              className="w-full bg-white border-4 border-slate-100 rounded-3xl px-6 py-5 text-xl font-black text-slate-700 focus:border-pink-400 focus:ring-0 focus:outline-none transition-all shadow-xl shadow-purple-100/50"
            />
          </div>

          <button 
            disabled={!studentName.trim() || !selectedAvatar}
            onClick={() => setScreen('kenaliDiri')}
            className={`px-8 py-6 rounded-3xl text-xl font-black shadow-2xl flex items-center justify-center gap-3 w-full transition-all active:scale-95 transform ${
              studentName.trim() && selectedAvatar
              ? 'bg-gradient-to-r from-pink-500 to-purple-600 text-white hover:shadow-pink-200 hover:-translate-y-1' 
              : 'bg-slate-200 text-slate-400 cursor-not-allowed shadow-none'
            }`}
          >
            Mula Kembara <ChevronRight size={28} />
          </button>
          {!selectedAvatar && studentName.trim() && <p className="text-pink-500 text-[10px] font-black mt-4 text-center uppercase tracking-widest animate-pulse">Sila pilih satu karakter di sebelah kiri</p>}
        </div>
      </div>
    </div>
  );
};

const Screen2KenaliDiri = ({ studentName, setScreen, selectedAvatar }) => (
  <div className="flex-1 p-6 md:p-8 flex items-center justify-center bg-gradient-to-tr from-blue-50 to-pink-50 overflow-y-auto">
    <div className="max-w-4xl w-full grid grid-cols-1 md:grid-cols-2 gap-12 items-center my-auto">
      <div className="order-2 md:order-1 space-y-6 text-center md:text-left">
         <div className="inline-block bg-yellow-400 text-yellow-900 px-4 py-1 rounded-full text-xs font-black uppercase tracking-widest shadow-sm">Kembara Baru</div>
         <h2 className="text-4xl md:text-5xl font-black text-slate-900 leading-tight">Hai {studentName.split(' ')[0]}! {selectedAvatar?.emoji}</h2>
         <p className="text-xl text-slate-600 leading-relaxed font-medium">
           Mari fahami minat anda melalui soalan bergambar yang seronok. Pilih jawapan ikut kata hati anda! ❤️
         </p>
         <div className="space-y-4">
            <div className="flex items-center gap-4 text-lg font-bold text-slate-700 bg-white p-4 rounded-2xl shadow-sm border-l-8 border-green-400 text-left">
              <div className="bg-green-100 text-green-600 rounded-full p-2 shrink-0"><Check size={20} strokeWidth={3} /></div> Pilih YA, MUNGKIN atau TIDAK
            </div>
            <div className="flex items-center gap-4 text-lg font-bold text-slate-700 bg-white p-4 rounded-2xl shadow-sm border-l-8 border-blue-400 text-left">
              <div className="bg-blue-100 text-blue-600 rounded-full p-2 shrink-0"><Sparkles size={20} strokeWidth={3} /></div> Lihat ikon untuk faham soalan
            </div>
         </div>
         <button 
          onClick={() => setScreen('soalan')}
          className="mt-6 bg-gradient-to-r from-blue-600 to-indigo-700 text-white px-12 py-6 rounded-3xl text-2xl font-black shadow-2xl flex items-center gap-4 w-full md:w-auto justify-center hover:scale-105 transition-all active:scale-95"
         >
           Jom Mula! <Play fill="currentColor" />
         </button>
      </div>
      <div className="order-1 md:order-2 bg-white p-4 rounded-[4rem] shadow-2xl rotate-3 transform transition-transform hover:rotate-0 duration-500 max-w-sm mx-auto md:max-w-none">
        <div className="bg-gradient-to-br from-pink-400 via-purple-400 to-blue-400 p-16 rounded-[3.5rem] flex items-center justify-center text-[10rem] shadow-inner text-white drop-shadow-2xl aspect-square">
          {selectedAvatar?.emoji || "🤔"}
        </div>
      </div>
    </div>
  </div>
);

const Screen3Soalan = ({ currentQuestion, questions, handleAnswer }) => {
  const playQuestionAudio = (text) => {
    window.speechSynthesis.cancel();
    const utterance = new SpeechSynthesisUtterance(text);
    utterance.lang = 'ms-MY';
    window.speechSynthesis.speak(utterance);
  };

  const onAnswer = (points) => {
    window.speechSynthesis.cancel();
    handleAnswer(points);
  };

  return (
    <div className="flex-1 bg-gradient-to-b from-slate-50 to-white flex flex-col p-4 md:p-8 overflow-y-auto">
      <div className="flex items-center gap-6 mb-8 max-w-5xl mx-auto w-full flex-shrink-0">
        <div className="h-5 flex-1 bg-slate-200 rounded-full overflow-hidden shadow-inner border-2 border-white">
          <div 
            className="h-full bg-gradient-to-r from-pink-500 via-purple-500 to-blue-500 transition-all duration-700 ease-out" 
            style={{ width: `${((currentQuestion + 1) / questions.length) * 100}%` }} 
          />
        </div>
        <span className="text-xl md:text-2xl font-black text-purple-600 bg-white px-4 md:px-6 py-2 rounded-2xl shadow-sm border-2 border-purple-100 whitespace-nowrap">
          {currentQuestion + 1} <span className="text-slate-300 mx-1">/</span> {questions.length}
        </span>
      </div>

      <div className="flex flex-col md:flex-row flex-1 gap-6 md:gap-10 items-stretch max-w-6xl mx-auto w-full mb-4">
        <div className="flex-1 bg-white rounded-[3.5rem] flex flex-col items-center justify-center p-8 md:p-12 border-4 border-slate-50 shadow-2xl text-center relative overflow-hidden group min-h-[300px]">
           <div className="absolute top-0 left-0 w-full h-2 bg-gradient-to-r from-pink-400 to-blue-400"></div>
           <button 
             onClick={() => playQuestionAudio(questions[currentQuestion].text)}
             className="absolute top-6 right-6 bg-purple-100 p-4 rounded-full shadow-lg text-purple-600 hover:bg-purple-600 hover:text-white transition-all active:scale-90"
           >
             <Volume2 size={28} />
           </button>

           <div className="bg-slate-50 w-40 h-40 md:w-64 md:h-64 rounded-full flex items-center justify-center mb-8 shadow-inner border-8 border-white transition-transform duration-500 group-hover:scale-110">
              <span className="text-8xl md:text-[140px] drop-shadow-xl">{questions[currentQuestion].icon}</span>
           </div>
           <h2 className="text-2xl md:text-4xl font-black text-slate-800 leading-tight max-w-md">
             {questions[currentQuestion].text}
           </h2>
        </div>
        <div className="flex-1 flex flex-col gap-4">
          {[
            { p: 3, label: "YA", icon: "😊", color: "from-green-400 to-emerald-600 shadow-green-200", sub: "Suka Sangat!" },
            { p: 1, label: "MUNGKIN", icon: "😐", color: "from-yellow-400 to-orange-500 shadow-yellow-200", sub: "Boleh Lah..." },
            { p: 0, label: "TIDAK", icon: "😞", color: "from-pink-500 to-red-600 shadow-pink-200", sub: "Tak Suka" }
          ].map((ans) => (
            <button 
              key={ans.label}
              onClick={() => onAnswer(ans.p)}
              className={`bg-gradient-to-br ${ans.color} flex-1 min-h-[100px] rounded-[2.5rem] px-8 flex items-center gap-6 md:gap-8 transition-all active:scale-95 text-left shadow-xl hover:-translate-y-1 group`}
            >
              <div className="bg-white/20 p-3 md:p-4 rounded-3xl backdrop-blur-sm group-hover:scale-110 transition-transform">
                <span className="text-4xl md:text-6xl drop-shadow-md">{ans.icon}</span>
              </div>
              <div className="flex flex-col text-white">
                <span className="text-2xl md:text-4xl font-black tracking-tighter">{ans.label}</span>
                <span className="text-xs md:text-sm opacity-80 font-black uppercase tracking-[0.2em]">{ans.sub}</span>
              </div>
            </button>
          ))}
        </div>
      </div>
    </div>
  );
};

const Screen4Profil = ({ studentName, scores, setScreen, resetApp, jobDetails, selectedAvatar }) => {
  const highest = Object.keys(scores).reduce((a, b) => scores[a] > scores[b] ? a : b);
  
  return (
    <div className="flex-1 p-4 md:p-10 bg-slate-50 overflow-y-auto">
      <div className="max-w-5xl mx-auto">
        <div className="flex flex-col md:flex-row md:items-end justify-between gap-4 mb-10">
          <div>
            <div className="inline-block bg-pink-500 text-white px-4 py-1 rounded-full text-xs font-black uppercase tracking-widest mb-3">Analisis Selesai</div>
            <h2 className="text-3xl md:text-5xl font-black text-slate-900 flex items-center gap-4">
              {selectedAvatar?.emoji} Profil {studentName.split(' ')[0]}
            </h2>
          </div>
          <button 
            onClick={resetApp}
            className="flex items-center gap-2 text-slate-400 font-bold hover:text-red-500 transition-colors"
          >
            <RotateCcw size={18} /> Mula Semula
          </button>
        </div>

        <div className="grid grid-cols-1 lg:grid-cols-3 gap-8">
          <div className="lg:col-span-2 bg-white p-6 md:p-10 rounded-[3.5rem] shadow-2xl border border-white">
             <h3 className="text-xl font-black text-slate-800 mb-8 flex items-center gap-3">
               <div className="bg-blue-100 p-2 rounded-xl text-blue-600"><BarChart3 size={24} /></div> Keputusan Minat
             </h3>
             <div className="space-y-8">
                {Object.entries(scores).map(([key, val]) => (
                  <div key={key} className="group">
                    <div className="flex justify-between mb-2 font-black text-slate-700">
                      <span className="flex items-center gap-3 text-base md:text-lg">
                        <span className="text-2xl group-hover:scale-125 transition-transform">{jobDetails[key]?.icon}</span> 
                        {jobDetails[key]?.title}
                      </span>
                      <span className="text-blue-600 bg-blue-50 px-3 py-1 rounded-lg text-sm">{Math.round((val/15)*100)}%</span>
                    </div>
                    <div className="h-5 bg-slate-100 rounded-2xl overflow-hidden border-2 border-white shadow-inner">
                      <div 
                        className={`h-full transition-all duration-1000 ease-out rounded-2xl ${key === highest ? 'bg-gradient-to-r from-blue-500 to-indigo-600' : 'bg-slate-300'}`} 
                        style={{ width: `${(val / 15) * 100}%` }} 
                      />
                    </div>
                  </div>
                ))}
             </div>
          </div>

          <div className="space-y-8">
             <div className="bg-gradient-to-br from-indigo-600 via-purple-600 to-pink-500 p-8 md:p-10 rounded-[3.5rem] text-white shadow-2xl relative overflow-hidden group">
                <div className="absolute -right-10 -bottom-10 opacity-10 rotate-12 text-[10rem] group-hover:rotate-0 transition-transform duration-700">
                   {selectedAvatar?.emoji}
                </div>
                <div className="bg-white/20 p-3 rounded-2xl inline-block mb-6 backdrop-blur-md">
                  <Star className="text-yellow-300" fill="currentColor" size={32} />
                </div>
                <p className="text-xs font-black text-white/60 uppercase tracking-[0.3em] mb-2">Bidang Dominan</p>
                <h3 className="text-2xl md:text-3xl font-black mt-1 leading-tight">
                  {jobDetails[highest]?.title}
                </h3>
                <div className="mt-6 bg-black/20 px-4 py-2 rounded-xl text-xs font-black inline-block backdrop-blur-sm border border-white/10">
                  {jobDetails[highest]?.intelligence}
                </div>
             </div>
             
             <button 
              onClick={() => setScreen('cadangan')}
              className="w-full bg-white p-8 rounded-[3rem] text-blue-600 font-black text-xl md:text-2xl shadow-xl border-4 border-transparent hover:border-blue-200 hover:shadow-blue-100 flex items-center justify-between group transition-all"
             >
                Lihat Cadangan <div className="bg-blue-600 text-white p-2 rounded-full group-hover:translate-x-2 transition-transform"><ChevronRight size={24} /></div>
             </button>
          </div>
        </div>
      </div>
    </div>
  );
};

const Screen5Cadangan = ({ studentName, scores, setScreen, setSelectedJobId, jobDetails, isCompleted }) => {
  const highest = Object.keys(scores).reduce((a, b) => scores[a] > scores[b] ? a : b);
  const jobs = Object.keys(jobDetails).map(key => ({ id: key, ...jobDetails[key] }));

  return (
    <div className="flex-1 p-6 md:p-10 bg-gradient-to-b from-white to-slate-50 overflow-y-auto">
      <div className="text-center mb-12 max-w-2xl mx-auto">
        <h2 className="text-3xl md:text-4xl font-black text-slate-900 mb-3 tracking-tighter">Penerokaan Kerjaya ✨</h2>
        <p className="text-lg md:text-xl text-slate-500 font-medium">Klik pada kad untuk melihat rahsia setiap pekerjaan!</p>
      </div>

      <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-8 w-full max-w-6xl mx-auto pb-12">
        {jobs.map(j => (
          <div 
            key={j.id} 
            onClick={() => { setSelectedJobId(j.id); setScreen('detail'); }}
            className={`group bg-white p-8 rounded-[3.5rem] shadow-xl cursor-pointer hover:shadow-2xl hover:-translate-y-2 transition-all flex flex-col items-center text-center relative border-4 ${isCompleted && j.id === highest ? 'border-blue-500 scale-105' : 'border-transparent'}`}
          >
            {isCompleted && j.id === highest ? (
              <div className="absolute -top-4 -right-4 bg-yellow-400 text-yellow-900 p-3 rounded-2xl shadow-xl rotate-12 font-black text-sm border-4 border-white z-10">
                TERBAIK! 🏆
              </div>
            ) : null}
            <div className={`${j.color} w-28 h-28 md:w-32 md:h-32 rounded-[2.5rem] flex items-center justify-center mb-6 shadow-inner border-4 border-white group-hover:rotate-6 transition-transform`}>
              <span className="text-6xl md:text-7xl drop-shadow-md">{j.icon}</span>
            </div>
            <h3 className="text-xl md:text-2xl font-black text-slate-800 leading-tight mb-2">{j.title}</h3>
            <span className="text-slate-400 text-[10px] font-black tracking-[0.2em] uppercase bg-slate-50 px-3 py-1 rounded-full">{j.intelligence}</span>
            
            <div className="mt-6 w-full pt-6 border-t-2 border-slate-50 flex items-center justify-center gap-2 text-blue-600 font-black text-sm opacity-0 group-hover:opacity-100 transition-opacity">
              Lihat Butiran <ChevronRight size={16} />
            </div>
          </div>
        ))}
      </div>
    </div>
  );
};

const Screen6Detail = ({ selectedJobId, jobDetails, setScreen }) => {
  const job = jobDetails[selectedJobId] || jobDetails.pembantu_dapur;

  return (
    <div className="flex-1 p-4 md:p-10 bg-white overflow-y-auto">
      <div className="max-w-5xl mx-auto">
        <button 
          onClick={() => setScreen('cadangan')}
          className="mb-8 flex items-center gap-3 text-slate-400 hover:text-blue-600 font-black transition-all bg-slate-50 px-6 py-3 rounded-2xl border-2 border-transparent hover:border-blue-100"
        >
          <ArrowLeft size={20} /> Kembali
        </button>
        
        <div className="flex flex-col lg:flex-row gap-12 items-start">
          <div className="lg:w-2/5 w-full">
             <div className={`${job.color} aspect-square rounded-[4rem] flex items-center justify-center text-[10rem] md:text-[12rem] mb-8 shadow-2xl border-8 border-white relative overflow-hidden group`}>
               <div className="absolute inset-0 opacity-10 bg-gradient-to-br from-black to-transparent"></div>
               <span className="relative z-10 drop-shadow-2xl group-hover:scale-110 transition-transform duration-500">{job.icon}</span>
             </div>
             <div className="grid grid-cols-2 gap-4">
                <div className="bg-slate-50 p-6 rounded-[2.5rem] border-2 border-white shadow-sm flex flex-col items-center text-center">
                   <div className="bg-yellow-100 p-2 rounded-xl text-yellow-600 mb-3"><Lightbulb size={24} /></div>
                   <h4 className="font-black text-slate-400 text-[10px] uppercase mb-1 tracking-widest">Kecerdasan</h4>
                   <span className="font-black text-slate-700 text-[11px] sm:text-xs md:text-sm">{job.intelligence}</span>
                </div>
                <div className="bg-slate-50 p-6 rounded-[2.5rem] border-2 border-white shadow-sm flex flex-col items-center text-center">
                   <div className="bg-pink-100 p-2 rounded-xl text-pink-600 mb-3"><Heart size={24} /></div>
                   <h4 className="font-black text-slate-400 text-[10px] uppercase mb-1 tracking-widest">Bidang</h4>
                   <span className="font-black text-slate-700 text-sm">{job.field}</span>
                </div>
             </div>
          </div>

          <div className="lg:w-3/5 w-full py-4">
             <h2 className={`text-4xl md:text-7xl font-black ${job.accent} mb-4 tracking-tighter leading-none`}>{job.title}</h2>
             <div className="h-2 w-24 bg-slate-200 rounded-full mb-10"></div>
             
             <div className="space-y-10">
                <section>
                  <h4 className="text-xs font-black text-slate-400 uppercase tracking-[0.3em] mb-4">Mengenai Kerjaya</h4>
                  <p className="text-xl md:text-2xl text-slate-600 leading-relaxed font-medium">
                    {job.desc}
                  </p>
                </section>

                <div className={`${job.color} border-l-[12px] ${job.border} p-8 md:p-10 rounded-r-[3.5rem] shadow-xl relative overflow-hidden`}>
                  <div className="absolute top-4 right-6 text-6xl opacity-10 font-serif">"</div>
                  <p className="text-lg md:text-xl italic font-black text-slate-800 leading-relaxed relative z-10">
                    {job.quote}
                  </p>
                </div>

                <section className="bg-slate-50 p-8 md:p-10 rounded-[3rem] border-2 border-white">
                  <h4 className="text-xs font-black text-slate-400 uppercase tracking-[0.3em] mb-6">Kemahiran Utama</h4>
                  <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                    {job.skills.map((skill, idx) => (
                      <div key={idx} className="flex items-center gap-4 bg-white p-4 rounded-2xl shadow-sm border border-slate-100">
                        <div className="bg-green-100 text-green-600 p-1 rounded-full shrink-0"><Check size={18} strokeWidth={4} /></div>
                        <span className="font-black text-slate-700">{skill}</span>
                      </div>
                    ))}
                  </div>
                </section>

                <button 
                  onClick={() => setScreen('simulasi')}
                  className="bg-gradient-to-r from-blue-600 to-indigo-700 text-white px-10 py-7 md:py-8 rounded-[2.5rem] font-black text-xl md:text-2xl flex items-center justify-center gap-6 shadow-2xl hover:scale-[1.02] active:scale-95 transition-all w-full mb-12"
                >
                  Cuba Simulasi Kerja <Play fill="currentColor" size={32} />
                </button>
             </div>
          </div>
        </div>
      </div>
    </div>
  );
};

const Screen7Simulasi = ({ selectedJobId, jobDetails, setScreen }) => {
  const [step, setStep] = useState(1);
  const job = jobDetails[selectedJobId] || jobDetails.pembantu_dapur;

  // --- DATA LANGKAH SIMULASI ---
  const stepsData = [
    { 
      id: 1, 
      title: "Langkah 1: Sediakan Diri", 
      desc: `Pastikan anda memakai pakaian yang sesuai dan bersihkan tangan sebelum memulakan tugasan ${job.title}.`, 
      type: "image", 
      src: selectedJobId === 'pembantu_ladang' ? "https://imgur.com/zhNsk9T.png" : 
           selectedJobId === 'pembantu_dapur' ? "https://i.imgur.com/iB1SMD8.png" : 
           selectedJobId === 'kru_pembersihan' ? "https://imgur.com/dm2i1Sh.png" : 
           selectedJobId === 'pembantu_bakeri' ? "https://imgur.com/ILQfdlf.png" : 
           selectedJobId === 'pereka_kraf' ? "https://imgur.com/NJAOKQ4.png" : 
           selectedJobId === 'pembantu_stor' ? "https://imgur.com/tQ6NsuD.png" : 
           selectedJobId === 'pembantu_pejabat' ? "https://imgur.com/OYdd0z8.png" : 
           selectedJobId === 'pembantu_muzik' ? "https://imgur.com/kpDEXrc.png" : 
           selectedJobId === 'pembantu_dobi' ? "https://imgur.com/1WE8BDG.png" : null
    },
    { 
      id: 2, 
      title: "Langkah 2: Mulakan Tugasan", 
      desc: `Lakukan tugasan harian dalam bidang ${job.field} mengikut arahan yang telah dipelajari.`, 
      type: "image", 
      src: selectedJobId === 'pembantu_ladang' ? "https://imgur.com/sfpRAOk.png" : 
           selectedJobId === 'pembantu_dapur' ? "https://i.imgur.com/SFFRdqb.png" : 
           selectedJobId === 'kru_pembersihan' ? "https://imgur.com/qgf1VXX.png" : 
           selectedJobId === 'pembantu_bakeri' ? "https://imgur.com/n5qvqml.png" : 
           selectedJobId === 'pereka_kraf' ? "https://imgur.com/Z4b0cRR.png" : 
           selectedJobId === 'pembantu_stor' ? "https://imgur.com/Gp6X4Ke.png" : 
           selectedJobId === 'pembantu_pejabat' ? "https://imgur.com/uriVbmY.png" : 
           selectedJobId === 'pembantu_muzik' ? "https://imgur.com/jL4jvDf.png" : 
           selectedJobId === 'pembantu_dobi' ? "https://imgur.com/i9QhHHo.png" : null
    },
    { 
      id: 3, 
      title: "Langkah 3: Kemas Kawasan", 
      desc: "Selesai tugasan? Pastikan semua peralatan dibersihkan dan disusun semula ke tempat asal.", 
      type: "image", 
      src: selectedJobId === 'pembantu_ladang' ? "https://imgur.com/lRTBIzf.png" : 
           selectedJobId === 'pembantu_dapur' ? "https://i.imgur.com/aM1Azzc.png" : 
           selectedJobId === 'kru_pembersihan' ? "https://imgur.com/57Xy2zn.png" : 
           selectedJobId === 'pembantu_bakeri' ? "https://imgur.com/NAAmNrz.png" : 
           selectedJobId === 'pereka_kraf' ? "https://imgur.com/oMalfs3.png" : 
           selectedJobId === 'pembantu_stor' ? "https://imgur.com/Ep3TZO8.png" : 
           selectedJobId === 'pembantu_pejabat' ? "https://imgur.com/0h8AV7l.png" : 
           selectedJobId === 'pembantu_muzik' ? "https://imgur.com/4m00M35.png" : 
           selectedJobId === 'pembantu_dobi' ? "https://imgur.com/JxOiwEP.png" : null
    }
  ];

  const playSimulationAudio = () => {
    const currentStep = stepsData[step - 1];
    const textToSpeak = `${currentStep.title}. ${currentStep.desc}`;
    window.speechSynthesis.cancel();
    const utterance = new SpeechSynthesisUtterance(textToSpeak);
    utterance.lang = 'ms-MY';
    window.speechSynthesis.speak(utterance);
  };

  const currentStepData = stepsData[step - 1];

  return (
    <div className="flex-1 flex flex-col bg-slate-950 p-4 md:p-8 overflow-y-auto">
      <div className="flex flex-col sm:flex-row justify-between items-center gap-4 mb-8 max-w-7xl mx-auto w-full flex-shrink-0">
         <div className="flex items-center gap-4 bg-white/5 p-3 rounded-3xl backdrop-blur-md border border-white/10 w-full sm:w-auto">
            <span className="text-3xl md:text-4xl bg-white/10 w-12 h-12 md:w-16 md:h-16 flex items-center justify-center rounded-2xl">{job.icon}</span>
            <div>
              <h2 className="text-white font-black text-xl md:text-2xl tracking-tight leading-none">{job.title}</h2>
              <p className="text-blue-400 text-[10px] font-black uppercase tracking-widest mt-1">Mod Simulasi</p>
            </div>
         </div>
         <button onClick={() => { window.speechSynthesis.cancel(); setScreen('detail'); }} className="text-slate-400 hover:text-white font-black text-sm bg-white/5 px-6 py-3 rounded-2xl transition-all hover:bg-red-500/20 whitespace-nowrap">Tutup</button>
      </div>
      
      <div className="flex-1 flex flex-col lg:flex-row gap-8 max-w-7xl mx-auto w-full mb-4">
        <div className="flex-[3] bg-slate-900 rounded-[3rem] md:rounded-[4rem] border-4 border-slate-800 flex flex-col items-center justify-center text-slate-600 relative overflow-hidden shadow-2xl min-h-[300px] md:min-h-[450px] p-4">
          <div className="absolute inset-0 bg-gradient-to-t from-black/50 to-transparent pointer-events-none"></div>
          
          <div className="z-10 w-full h-full flex items-center justify-center">
            {currentStepData.src ? (
              <div className="w-full h-full max-w-2xl bg-white rounded-3xl overflow-hidden shadow-2xl flex flex-col items-center justify-center p-4">
                <img 
                   src={currentStepData.src} 
                   alt={`Langkah ${step} ${job.title}`}
                   className="max-w-full max-h-full object-contain rounded-xl"
                   onError={(e) => {
                     e.target.onerror = null; 
                     e.target.src = "https://placehold.co/600x400?text=Gambar+Langkah+" + step;
                   }}
                />
              </div>
            ) : (
              <div className="text-center p-8 md:p-12">
                {currentStepData.type === 'video' ? <Video size={80} strokeWidth={1} className="mx-auto mb-4 md:mb-6 text-blue-500 opacity-40" /> : <ImageIcon size={80} strokeWidth={1} className="mx-auto mb-4 md:mb-6 text-pink-500 opacity-40" />}
                <p className="text-lg md:text-2xl opacity-20 tracking-[0.3em] font-black text-white uppercase">Kawasan Simulasi Interaktif</p>
                <p className="mt-4 md:mt-6 text-slate-500 font-bold italic text-base md:text-lg">Paparan Langkah {step}</p>
              </div>
            )}
          </div>

          <div className="absolute bottom-6 md:bottom-10 left-6 md:left-10 right-6 md:right-10 flex gap-3 h-2 md:h-3">
            {[1, 2, 3].map(s => (
              <div key={s} className={`flex-1 rounded-full transition-all duration-500 ${step >= s ? 'bg-blue-500 shadow-[0_0_15px_rgba(59,130,246,0.6)]' : 'bg-white/10'}`}></div>
            ))}
          </div>
        </div>

        <div className="flex-[2] bg-white rounded-[3rem] md:rounded-[4rem] p-8 md:p-12 flex flex-col shadow-2xl border-b-8 border-slate-200 min-h-[400px]">
          <div className="flex items-center gap-5 mb-6 md:mb-8 flex-shrink-0">
            <span className="w-12 h-12 md:w-16 md:h-16 bg-gradient-to-br from-blue-600 to-indigo-700 text-white rounded-2xl md:rounded-3xl flex items-center justify-center text-2xl md:text-3xl font-black shadow-xl transform -rotate-6">{step}</span>
            <h3 className="text-xl md:text-2xl font-black text-slate-800 uppercase tracking-tight">Prosedur Kerja</h3>
          </div>
          
          <div className="space-y-4 md:space-y-6 flex-1">
            <h4 className="text-2xl md:text-4xl font-black text-blue-600 leading-tight">{currentStepData.title}</h4>
            <p className="text-lg md:text-xl text-slate-600 leading-relaxed font-bold">{currentStepData.desc}</p>
          </div>

          <div className="mt-8 md:mt-12 space-y-4 flex-shrink-0">
             <button 
               onClick={playSimulationAudio}
               className="flex items-center gap-4 text-blue-600 font-black p-5 md:p-6 bg-blue-50 rounded-[1.5rem] md:rounded-[2rem] w-full justify-center hover:bg-blue-100 transition-all border-4 border-white shadow-sm group"
             >
               <Volume2 size={24} className="group-hover:scale-125 transition-transform" /> Dengar Arahan
             </button>
             {step < 3 ? (
               <button 
                onClick={() => { window.speechSynthesis.cancel(); setStep(step + 1); }} 
                className="w-full bg-gradient-to-r from-blue-600 to-indigo-700 text-white py-6 md:py-8 rounded-[1.5rem] md:rounded-[2.5rem] font-black text-xl md:text-2xl flex items-center justify-center gap-4 shadow-2xl hover:translate-y-[-4px] active:scale-95 transition-all"
               >
                 Seterusnya <ChevronRight size={28} />
               </button>
             ) : (
               <button 
                onClick={() => { window.speechSynthesis.cancel(); setScreen('dashboard'); }} 
                className="w-full bg-gradient-to-r from-green-500 to-emerald-600 text-white py-6 md:py-8 rounded-[1.5rem] md:rounded-[2.5rem] font-black text-xl md:text-2xl flex items-center justify-center gap-4 shadow-2xl hover:translate-y-[-4px] active:scale-95 transition-all animate-bounce-short"
               >
                 Selesai Simulasi <CheckCircle size={28} />
               </button>
             )}
          </div>
        </div>
      </div>
    </div>
  );
};

const Screen8Dashboard = ({ studentName, resetApp, selectedAvatar }) => {
  const handlePrint = () => {
    window.print();
  };

  return (
    <div className="flex-1 p-6 md:p-12 bg-gradient-to-tr from-purple-100 via-white to-blue-100 flex items-center justify-center overflow-y-auto print:bg-white print:p-0">
      <div className="bg-white rounded-[4rem] shadow-2xl w-full max-w-4xl p-10 md:p-16 relative overflow-hidden print:shadow-none print:max-w-none print:m-0 print:rounded-none border-8 border-slate-50 my-auto">
        <div className="absolute top-0 right-0 w-80 h-80 bg-purple-100 rounded-full -mr-40 -mt-40 opacity-50 blur-3xl print:hidden"></div>
        <div className="absolute bottom-0 left-0 w-80 h-80 bg-blue-100 rounded-full -ml-40 -mb-40 opacity-50 blur-3xl print:hidden"></div>
        
        <div className="flex flex-col md:flex-row items-center gap-10 mb-14 border-b-4 border-slate-50 pb-12 relative z-10">
          <div className="w-32 h-32 md:w-40 md:h-40 bg-gradient-to-tr from-purple-500 to-pink-500 rounded-[3rem] md:rounded-[3.5rem] flex items-center justify-center overflow-hidden shadow-2xl border-8 border-white flex-shrink-0 text-7xl md:text-8xl transform -rotate-3">
            {selectedAvatar?.emoji || "👤"}
          </div>
          <div className="text-center md:text-left">
            <div className="inline-block bg-green-500 text-white px-4 py-1 rounded-full text-[10px] md:text-xs font-black uppercase tracking-[0.3em] mb-4">Sijil Digital Selesai</div>
            <h2 className="text-3xl md:text-6xl font-black text-slate-900 leading-none mb-3 tracking-tighter">{studentName || 'Nama Murid'}</h2>
            <p className="text-xl md:text-2xl text-purple-600 font-black">Laporan Potensi TriCareer MBPK</p>
            <div className="mt-6 flex flex-wrap gap-3 justify-center md:justify-start">
               <span className="bg-blue-100 text-blue-700 px-4 md:px-5 py-2 rounded-2xl text-[10px] md:text-xs font-black uppercase tracking-widest border-2 border-white shadow-sm">Inventori: Lulus</span>
               <span className="bg-emerald-100 text-emerald-700 px-4 md:px-5 py-2 rounded-2xl text-[10px] md:text-xs font-black uppercase tracking-widest border-2 border-white shadow-sm">Simulasi: Cemerlang</span>
            </div>
          </div>
        </div>
        
        <div className="grid grid-cols-1 md:grid-cols-2 gap-10 relative z-10 mb-12">
          <div className="bg-slate-50 p-8 md:p-10 rounded-[3rem] md:rounded-[3.5rem] border-4 border-dashed border-slate-200 flex flex-col justify-center text-center md:text-left relative">
             <div className="absolute -top-6 left-1/2 md:left-10 -translate-x-1/2 md:translate-x-0 bg-white p-3 rounded-2xl shadow-md text-purple-600">
                <Sparkles size={28} />
             </div>
             <h4 className="font-black text-slate-900 mb-4 text-lg md:text-xl mt-2">
               Rumusan Potensi
             </h4>
             <p className="text-lg md:text-xl text-slate-600 leading-relaxed italic font-bold">
               "{studentName || 'Murid'} telah menunjukkan kesungguhan tinggi dalam meneroka minat kerjaya dan berjaya mengikut semua SOP simulasi kerja dengan sangat baik."
             </p>
          </div>
          <div className="bg-gradient-to-br from-slate-900 to-slate-800 p-8 md:p-10 rounded-[3rem] md:rounded-[3.5rem] shadow-2xl text-white flex flex-col justify-center items-center md:items-start overflow-hidden relative group">
             <div className="absolute inset-0 bg-gradient-to-tr from-purple-500/20 to-transparent"></div>
             <p className="text-[10px] font-black text-slate-400 uppercase mb-3 tracking-[0.3em] relative z-10">Tahap Ketersediaan Kerja</p>
             <p className="text-3xl md:text-5xl font-black relative z-10 group-hover:scale-105 transition-transform">SEDIA AMALI</p>
             <div className="h-4 w-full bg-white/10 mt-8 rounded-full overflow-hidden border border-white/10 relative z-10">
                <div className="h-full bg-gradient-to-r from-blue-400 to-pink-400 w-4/5 shadow-[0_0_20px_rgba(244,114,182,0.5)]"></div>
             </div>
             <div className="flex justify-between w-full mt-4 text-[10px] font-black text-slate-400 relative z-10">
                <span>BERMULA</span>
                <span className="text-pink-400">85% KESEDIAAN</span>
             </div>
          </div>
        </div>

        <div className="hidden print:block mt-20 border-t-4 border-slate-100 pt-12">
          <div className="grid grid-cols-2 gap-32">
            <div className="text-center">
              <div className="h-24 border-b-2 border-slate-200 mb-4"></div>
              <p className="text-xs font-black text-slate-800 uppercase tracking-widest">Tandatangan Guru Pengiring</p>
            </div>
            <div className="text-center">
              <div className="h-24 border-b-2 border-slate-200 mb-4"></div>
              <p className="text-xs font-black text-slate-800 uppercase tracking-widest">Tandatangan Penjaga</p>
            </div>
          </div>
        </div>

        <div className="mt-14 flex flex-col sm:flex-row gap-6 print:hidden">
          <button 
            onClick={handlePrint}
            className="flex-[2] bg-gradient-to-r from-blue-600 to-indigo-700 text-white py-6 md:py-7 rounded-3xl font-black text-xl md:text-2xl shadow-2xl hover:translate-y-[-4px] active:scale-95 transition-all flex items-center justify-center gap-4"
          >
            <Printer size={32} /> Cetak Sijil & Laporan
          </button>
          <button 
            onClick={() => { window.speechSynthesis.cancel(); resetApp(); }}
            className="flex-1 bg-white border-4 border-slate-100 py-6 md:py-7 rounded-3xl text-slate-400 font-black text-base md:text-lg hover:bg-red-50 hover:text-red-500 hover:border-red-100 transition-all flex items-center justify-center gap-3 shadow-lg"
          >
            <RotateCcw size={22} /> Mula Baru
          </button>
        </div>
      </div>
    </div>
  );
};

// --- APLIKASI UTAMA ---

const App = () => {
  const [screen, setScreen] = useState('home');
  const [currentQuestion, setCurrentQuestion] = useState(0);
  const [selectedJobId, setSelectedJobId] = useState('pembantu_dapur');
  const [studentName, setStudentName] = useState('');
  const [selectedAvatar, setSelectedAvatar] = useState(null);
  const [isCompleted, setIsCompleted] = useState(false);
  const [scores, setScores] = useState({
    pembantu_dapur: 0, pembantu_ladang: 0, kru_pembersihan: 0,
    pembantu_bakeri: 0, pereka_kraf: 0, pembantu_stor: 0,
    pembantu_pejabat: 0, pembantu_muzik: 0, pembantu_dobi: 0
  });

  const questions = [
    { text: "Saya suka sukat air menggunakan cawan.", cat: "pembantu_dapur", icon: "🥛" },
    { text: "Saya suka susun pinggan ikut saiz.", cat: "pembantu_dapur", icon: "🍽️" },
    { text: "Saya suka kira berapa biji telur ada.", cat: "pembantu_dapur", icon: "🥚" },
    { text: "Saya suka ikut masa memasak (guna timer).", cat: "pembantu_dapur", icon: "⏲️" },
    { text: "Saya suka asingkan sayur ikut warna.", cat: "pembantu_dapur", icon: "🥦" },
    { text: "Saya suka pegang tanah yang basah.", cat: "pembantu_ladang", icon: "🪴" },
    { text: "Saya suka siram pokok bunga pagi-pagi.", cat: "pembantu_ladang", icon: "🚿" },
    { text: "Saya suka cabut rumput liar di taman.", cat: "pembantu_ladang", icon: "🌿" },
    { text: "Saya suka tengok ulat atau rama-rama.", cat: "pembantu_ladang", icon: "🦋" },
    { text: "Saya suka kutip buah yang sudah masak.", cat: "pembantu_ladang", icon: "🍎" },
    { text: "Saya suka sapu lantai sampai bersih.", cat: "kru_pembersihan", icon: "🧹" },
    { text: "Saya rasa tenang bila bilik kemas.", cat: "kru_pembersihan", icon: "✨" },
    { text: "Saya suka cuci cermin sampai berkilat.", cat: "kru_pembersihan", icon: "🪟" },
    { text: "Saya suka susun kasut dengan rapi.", cat: "kru_pembersihan", icon: "👟" },
    { text: "Saya mahu pastikan tandas sentiah bersih.", cat: "kru_pembersihan", icon: "🚽" },
    { text: "Saya suka uli doh guna tangan.", cat: "pembantu_bakeri", icon: "🥣" },
    { text: "Saya suka terap biskut guna acuan.", cat: "pembantu_bakeri", icon: "🍪" },
    { text: "Saya suka sapu krim atas kek.", cat: "pembantu_bakeri", icon: "🍰" },
    { text: "Saya suka susun roti dalam talam.", cat: "pembantu_bakeri", icon: "🍱" },
    { text: "Saya suka pecahkan telur dalam mangkuk.", cat: "pembantu_bakeri", icon: "🍳" },
    { text: "Saya suka lukis gambar yang cantik.", cat: "pereka_kraf", icon: "🎨" },
    { text: "Saya suka buat corak guna warna.", cat: "pereka_kraf", icon: "🖌️" },
    { text: "Saya suka cantumkan kepingan puzzle.", cat: "pereka_kraf", icon: "🧩" },
    { text: "Saya suka buat cad ucapan sendiri.", cat: "pereka_kraf", icon: "✉️" },
    { text: "Saya suka gunting kertas jadi bentuk.", cat: "pereka_kraf", icon: "✂️" },
    { text: "Saya suka tolong kawan cari barang.", cat: "pembantu_stor", icon: "🔍" },
    { text: "Saya suka tegur orang dengan senyuman.", cat: "pembantu_stor", icon: "😊" },
    { text: "Saya suka kerja dalam kumpulan.", cat: "pembantu_stor", icon: "👥" },
    { text: "Saya suka susun kotak-kotak besar.", cat: "pembantu_stor", icon: "📦" },
    { text: "Saya suka labelkan nama pada barang.", cat: "pembantu_stor", icon: "🏷️" },
    { text: "Saya suka tulis nota dalam buku.", cat: "pembantu_pejabat", icon: "📝" },
    { text: "Saya suka baca arahan pada kertas.", cat: "pembantu_pejabat", icon: "📖" },
    { text: "Saya suka bercerita dengan guru.", cat: "pembantu_pejabat", icon: "🗣️" },
    { text: "Saya suka susun fail ikut abjad (A,B,C).", cat: "pembantu_pejabat", icon: "📂" },
    { text: "Saya suka hantar surat ke pejabat.", cat: "pembantu_pejabat", icon: "📬" },
    { text: "Saya suka dengar bunyi muzik yang kuat.", cat: "pembantu_muzik", icon: "🎶" },
    { text: "Saya suka tepuk tangan ikut rentak lagu.", cat: "pembantu_muzik", icon: "👏" },
    { text: "Saya suka susun alat muzik (seperti kompang).", cat: "pembantu_muzik", icon: "🥁" },
    { text: "Saya suka simpan mikrofon dengan berhatihati.", cat: "pembantu_muzik", icon: "🎤" },
    { text: "Saya rasa seronok bila ada majlis nyanyian.", cat: "pembantu_muzik", icon: "🎵" },
    { text: "Saya suka bau baju yang wangi.", cat: "pembantu_dobi", icon: "👕" },
    { text: "Saya suka lipat kain dengan kemas.", cat: "pembantu_dobi", icon: "🧺" },
    { text: "Saya rasa puas bila bakul kosong.", cat: "pembantu_dobi", icon: "🧺" },
    { text: "Saya mahu bantu orang pakai baju bersih.", cat: "pembantu_dobi", icon: "🧼" },
    { text: "Saya suka asingkan baju ikut jenis.", cat: "pembantu_dobi", icon: "👔" },
  ];

  const jobDetails = {
    pembantu_dapur: { title: "Pembantu Dapur", field: "Perkhidmatan Makanan", intelligence: "Logik Matematik", icon: "🍳", color: "bg-orange-100", accent: "text-orange-600", border: "border-orange-400", desc: "Membantu menyediakan bahan mentah, menguruskan inventori makanan, and memastikan kebersihan ruang memasak.", quote: "Sesuai untuk murid yang teliti dengan sukatan and suka menguruskan alatan.", skills: ["Ketepatan Masa", "Kebersihan", "Sukat Bahan"] },
    pembantu_ladang: { title: "Pembantu Ladang", field: "Pertanian & Landskap", intelligence: "Naturalis", icon: "🌱", color: "bg-emerald-100", accent: "text-emerald-600", border: "border-emerald-400", desc: "Melibatkan penjagaan tanaman, penyiraman, and pemeliharaan kawasan hijau di sekolah atau komuniti.", quote: "Sangat baik untuk murid yang suka aktiviti luar and menyayangi alam sekitar.", skills: ["Kekuatan Fizikal", "Ketabahan", "Suka Outdoor"] },
    kru_pembersihan: { title: "Kru Pembersihan", field: "Perkhidmatan Awam", intelligence: "Intrapersonal", icon: "🧹", color: "bg-sky-100", accent: "text-sky-600", border: "border-sky-400", desc: "Menjalankan tugasan pembersihan rutin untuk memastikan persekitaran sentiasa ceria and sihat.", quote: "Terbaik bagi murid yang mempunyai disiplin kendiri tinggi and suka kekemasan.", skills: ["Ketelitian", "Fokus", "Disiplin"] },
    pembantu_bakeri: { title: "Pembantu Bakeri", field: "Pembuatan Makanan", intelligence: "Kinestetik", icon: "🍞", color: "bg-amber-100", accent: "text-amber-700", border: "border-amber-400", desc: "Fokus kepada aktiviti fizikal di dapur bakeri seperti menguli doh, membentuk biskut, and membungkus.", quote: "Menarik bagi murid yang aktif bergerak and mempunyai kemahiran motor halus.", skills: ["Motor Halus", "Kesabaran", "Kualiti"] },
    pereka_kraf: { title: "Pereka Kraf", field: "Seni & Kreatif", intelligence: "Visual Ruang", icon: "🎨", color: "bg-indigo-100", accent: "text-indigo-600", border: "border-indigo-400", desc: "Menghasilkan barangan hiasan atau cenderamata kreatif menggunakan pelbagai bahan seni.", quote: "Sangat sesuai bagi murid yang mempunyai daya imaginasi and suka warna.", skills: ["Kreativiti", "Ketekunan", "Sua Seni"] },
    pembantu_stor: { title: "Pembantu Stor", field: "Logistik & Runcit", intelligence: "Interpersonal", icon: "📦", color: "bg-rose-100", accent: "text-rose-600", border: "border-rose-400", desc: "Membantu menyusun stok barang, melabel, and bekerjasama dengan rakan sepasukan untuk mencari barang.", quote: "Peluang untuk murid bersosialisasi and bekerja dalam suasana berpasukan.", skills: ["Komunikasi", "Kerjasama", "Susun Atur"] },
    pembantu_pejabat: { title: "Pembantu Pejabat", field: "Pentadbiran", intelligence: "Verbal Linguistik", icon: "📝", color: "bg-blue-100", accent: "text-blue-700", border: "border-blue-400", desc: "Tugas menyisih surat, memfailkan dokumen mudah, and membantu urusan komunikasi ringkas.", quote: "Sesuai bagi murid yang suka membaca, menulis, and mengikuti arahan bertulis.", skills: ["Literasi", "Ketepatan", "Susun Fail"] },
    pembantu_muzik: { title: "Pembantu Studio/Muzik", field: "Seni Persembahan", intelligence: "Muzik", icon: "🎸", color: "bg-purple-100", accent: "text-purple-600", border: "border-purple-400", desc: "Menyediakan alatan muzik sebelum latihan, menyusun kerusi untuk persembahan, and membantu menjaga kebersihan studio muzik.", quote: "Sesuai bagi murid yang peka terhadap bunyi and sangat meminati dunia muzik.", skills: ["Irama", "Penjagaan Alatan", "Suka Muzik"] },
    pembantu_dobi: { title: "Pembantu Dobi", field: "Perkhidmatan Dobi", intelligence: "Eksistensial", icon: "🧺", color: "bg-teal-100", accent: "text-teal-600", border: "border-teal-400", desc: "Mengasingkan pakaian, melipat kain dengan rapi, and membantu menguruskan bungkusan dobi.", quote: "Bagus untuk murid yang menghargai nilai sumbangan kepada orang lain melalui kebersihan.", skills: ["Lipatan Rapi", "Deria Bau", "Faham Nilai"] }
  };

  const handleAnswer = (points) => {
    const category = questions[currentQuestion].cat;
    setScores(prev => ({ ...prev, [category]: prev[category] + points }));
    if (currentQuestion < questions.length - 1) {
      setCurrentQuestion(currentQuestion + 1);
    } else {
      setIsCompleted(true);
      setScreen('profil');
    }
  };

  const resetApp = () => {
    const initialScores = {};
    Object.keys(jobDetails).forEach(key => initialScores[key] = 0);
    setScores(initialScores);
    setCurrentQuestion(0);
    setScreen('home');
    setStudentName('');
    setSelectedAvatar(null);
    setIsCompleted(false);
  };

  const navItems = [
    { id: 'home', label: 'Utama', icon: <Home size={18}/>, locked: false },
    { id: 'kenaliDiri', label: 'Mula', icon: <Info size={18}/>, locked: true },
    { id: 'soalan', label: 'Soalan', icon: <Gamepad2 size={18}/>, locked: true },
    { id: 'profil', label: 'Profil', icon: <User size={18}/>, locked: false },
    { id: 'cadangan', label: 'Bidang', icon: <Star size={18}/>, locked: false },
    { id: 'dashboard', label: 'Laporan', icon: <LayoutDashboard size={18}/>, locked: true },
  ];

  return (
    <div className="fixed inset-0 bg-white font-sans text-slate-900 flex flex-col select-none overflow-hidden">
      <nav className="bg-white/80 backdrop-blur-md border-b-4 border-slate-50 px-4 md:px-8 py-4 flex items-center justify-between shadow-sm flex-shrink-0 z-50 print:hidden">
        <div className="flex items-center gap-3">
          <div className="bg-gradient-to-tr from-pink-500 to-purple-600 p-2 rounded-2xl text-white shadow-lg"><Rocket size={24} /></div>
          <span className="font-black text-slate-900 text-xl md:text-2xl tracking-tighter hidden xs:block">TriCareer MBPK</span>
        </div>
        <div className="flex gap-2 overflow-x-auto no-scrollbar max-w-[60%] sm:max-w-none px-2">
          {navItems.map((item) => {
            const isLocked = !studentName.trim() && item.locked;
            return (
              <button
                key={item.id}
                disabled={isLocked}
                onClick={() => { window.speechSynthesis.cancel(); setScreen(item.id); }}
                className={`flex items-center gap-2 px-3 md:px-4 py-2 md:py-3 rounded-2xl text-sm font-black transition-all whitespace-nowrap border-2 ${
                  screen === item.id 
                  ? 'bg-slate-900 text-white border-slate-900 shadow-xl scale-105' 
                  : isLocked ? 'text-slate-300 border-transparent cursor-not-allowed opacity-50' : 'text-slate-500 border-transparent hover:bg-slate-50'
                }`}
              >
                {isLocked ? <Lock size={14} /> : item.icon}
                <span className="hidden lg:inline">{item.label}</span>
              </button>
            );
          })}
        </div>
        <button onClick={() => { window.speechSynthesis.cancel(); resetApp(); }} className="p-2 md:p-3 text-slate-400 hover:text-red-500 hover:bg-red-50 rounded-2xl transition-all"><LogOut size={24} /></button>
      </nav>

      <main className="flex-1 flex flex-col overflow-hidden relative print:overflow-visible">
        {screen === 'home' && (
          <Screen1Home 
            studentName={studentName} 
            setStudentName={setStudentName} 
            setScreen={setScreen} 
            selectedAvatar={selectedAvatar}
            setSelectedAvatar={setSelectedAvatar}
          />
        )}
        {screen === 'kenaliDiri' && <Screen2KenaliDiri studentName={studentName} setScreen={setScreen} selectedAvatar={selectedAvatar} />}
        {screen === 'soalan' && <Screen3Soalan currentQuestion={currentQuestion} questions={questions} handleAnswer={handleAnswer} />}
        {screen === 'profil' && <Screen4Profil studentName={studentName} scores={scores} setScreen={setScreen} resetApp={resetApp} jobDetails={jobDetails} selectedAvatar={selectedAvatar} />}
        {screen === 'cadangan' && <Screen5Cadangan studentName={studentName} scores={scores} setScreen={setScreen} setSelectedJobId={setSelectedJobId} jobDetails={jobDetails} isCompleted={isCompleted} />}
        {screen === 'detail' && <Screen6Detail selectedJobId={selectedJobId} jobDetails={jobDetails} setScreen={setScreen} />}
        {screen === 'simulasi' && <Screen7Simulasi selectedJobId={selectedJobId} jobDetails={jobDetails} setScreen={setScreen} />}
        {screen === 'dashboard' && <Screen8Dashboard studentName={studentName} resetApp={resetApp} selectedAvatar={selectedAvatar} />}
      </main>
      
      <style>{`
        .no-scrollbar::-webkit-scrollbar { display: none; }
        .no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }
        
        @keyframes gradient-slow {
          0% { background-position: 0% 50%; }
          50% { background-position: 100% 50%; }
          100% { background-position: 0% 50%; }
        }
        .animate-gradient-slow {
          background-size: 200% 200%;
          animation: gradient-slow 15s ease infinite;
        }

        @keyframes bounce-short {
          0%, 100% { transform: translateY(0); }
          50% { transform: translateY(-10px); }
        }
        .animate-bounce-short {
          animation: bounce-short 2s ease-in-out infinite;
        }

        @media print {
          body { background: white !important; }
          .fixed { position: static !important; }
          main { overflow: visible !important; }
          @page { margin: 0; }
          nav { display: none !important; }
        }
      `}</style>
    </div>
  );
};

export default App;